import { useEffect, useState, useContext } from 'react'
import { Space, Button, Table, TablePaginationConfig } from 'antd'
import { EAddressSchema } from '@components/schema/address'
import style from './index.module.less'
import { getListRequest } from './ajax'
import { awaitWrap } from '@src/assets/js/tool'
import { getColumns } from './util'
import { CaseContext } from '../../../context'
import { ArbitratorSchema } from '@src/components/schema/arbitrator'
import Modal from './components/modal'

async function getList (
  caseid: string,
  setLoading: (v: boolean) => void,
  setList: (v: EAddressSchema[]) => void,
) {
  setLoading(true)
  const [e, d] = await awaitWrap(getListRequest(caseid))
  setLoading(false)
  if (e === null && d !== null) {
    setList(d)
  }
}

function Main () {
  const c = useContext(CaseContext)
  const [loading, setLoading] = useState(false)
  const [visible, setVisible] = useState(false)
  const [modifyData, setModifyData] = useState<EAddressSchema | null>(null)
  const [list, setList] = useState<EAddressSchema[]>([])
  const columns = getColumns(c.caseid, c.editable, setModifyData, setVisible, () => {
    getList(c.caseid, setLoading, setList)
  })
  useEffect(() => {
    getList(c.caseid, setLoading, setList)
  }, [])
  return (
    <div className={style.container}>
      <Modal caseDetail={c.caseDetail} caseid={c.caseid} arbitrators={c.arbitrators} visible={visible} data={modifyData} hide={() => { setModifyData(null); setVisible(false) }} refreshFn={() => { getList(c.caseid, setLoading, setList) }} />
      <div className={style['operate-line']}>
        <span className={style['operate-title']}>电子送达地址</span>
        <Space>
          <Button type='primary' onClick={() => setVisible(true)}>新增地址</Button>
        </Space>
      </div>
      <div>
        <Table rowKey='id' loading={loading} columns={columns} dataSource={list} pagination={false} />
      </div>
    </div>
  )
}

export default Main
